<template>
  <div class="order-page">
    <div v-if="!userStore.isLoggedIn" class="login-prompt">
      <h2>您还没有登录</h2>
      <p>请先登录后再查看订单</p>
      <router-link to="/login" class="login-btn">
        去登录
      </router-link>
    </div>
    
    <div v-else>
      <h1>我的订单</h1>
      <div class="filter-bar">
        <button @click="setFilter('all')" :class="{ active: currentFilter === 'all' }">全部</button>
        <button @click="setFilter('shipped')" :class="{ active: currentFilter === 'shipped' }">
          已发货
        </button>
        <button @click="setFilter('notShipped')" :class="{ active: currentFilter === 'notShipped' }">
          未发货
        </button>
        <button @click="setFilter('completed')" :class="{ active: currentFilter === 'completed' }">
          已完成
        </button>
      </div>
      <div class="search-bar">
        <input v-model="searchQuery" placeholder="搜索订单号或商品名称" @input="filterOrders" />
      </div>
      <table v-if="filteredOrders.length">
        <thead>
          <tr>
            <th>订单号</th>
            <th>商品名称</th>
            <th>订单日期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in filteredOrders" :key="order.id">
            <td>{{ order.orderNumber }}</td>
            <td>{{ order.product.name }}</td>
            <td>{{ formatDate(order.orderDate) }}</td>
            <td>
              <span :class="['status', order.status]">{{ getStatusText(order.status) }}</span>
            </td>
            <td>
              <button v-if="order.status === 'shipped'" @click="viewLogistics(order.id)">
                查看物流
              </button>
              <button v-if="order.status === 'shipped'" @click="confirmReceipt(order.id)">
                确认收货
              </button>
              <button v-if="order.status === 'notShipped'" @click="cancelOrder(order.id)">
                取消订单
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-else class="no-orders">暂无订单</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { useOrderStore } from '../../stores/orderStore';
import { useRouter } from 'vue-router';
import { useUserStore } from '../../stores/userStore';

const orderStore = useOrderStore();
const router = useRouter();
const userStore = useUserStore();
const searchQuery = ref('');
const currentFilter = ref('all');
const filteredOrders = computed(() => {
  let filtered = orderStore.getFilteredOrders(currentFilter.value);
  if (searchQuery.value) {
    filtered = filtered.filter(
      (order) =>
        order.orderNumber.includes(searchQuery.value) ||
        order.product.name.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  }
  return filtered;
});
onMounted(async () => {
  orderStore.fetchOrders();
});
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
const getStatusText = (status) => {
  const statusMap = {
    shipped: '已发货',
    notShipped: '未发货',
    completed: '已完成',
  };
  return statusMap[status] || '未知状态';
};
const setFilter = (filter) => {
  currentFilter.value = filter;
};
const viewLogistics = (orderId) => {
  router.push({ name: 'Logistics', params: { id: orderId } });
};
const confirmReceipt = (orderId) => {
  console.log('确认收货', orderId);
  // 需要实现:
  // 1. 调用后端 API 确认收货
  // 2. 更新订单状态为已完成
  // 3. 可能需要积分奖励等逻辑
};
const cancelOrder = (orderId) => {
  console.log('取消订单', orderId);
};
</script>
<style scoped>
.orders {
  padding: 20px;
}
h1 {
  color: #333;
  margin-bottom: 20px;
}
.filter-bar {
  margin-bottom: 20px;
}
.filter-bar button {
  margin-right: 10px;
  padding: 5px 10px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
}
.filter-bar button.active {
  background-color: #007bff;
  color: white;
}
.search-bar {
  margin-bottom: 20px;
}
.search-bar input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
.status {
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.9em;
}
.status.shipped {
  background-color: #d4edda;
  color: #155724;
}
.status.notShipped {
  background-color: #fff3cd;
  color: #856404;
}
.status.completed {
  background-color: #cce5ff;
  color: #004085;
}
button {
  margin-right: 5px;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
.no-orders {
  text-align: center;
  color: #666;
  margin-top: 20px;
}
.logistics-link {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
.login-prompt {
  text-align: center;
  padding: 40px 20px;
  background: #f8f8f8;
  border-radius: 8px;
  margin: 20px;
}

.login-prompt h2 {
  color: #333;
  margin-bottom: 10px;
}

.login-prompt p {
  color: #666;
  margin-bottom: 20px;
}

.login-btn {
  display: inline-block;
  padding: 10px 30px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #0056b3;
}
</style>
